<template>
  <cube-scroll ref="scroll" class="my" :options="scrollOptions">
    <div class="header-wrapper">
      <div class="avatar">
        <!-- <img width="64" height="64" :src="seller.avatar"> -->
        <img width="64" height="64" src="http://static.galileo.xiaojukeji.com/static/tms/default_header.png">
      </div>
      <div class="content">
        <div class="title">
          <span class="name">用户: 007</span>
        </div>
        <div class="description">更多精彩内容还在更新中...</div>
      </div>
    </div>
    <split></split>
    <div class="functions-wrapper">
      <ul class="remark">
          <li class="block" @click="showOrder">
            <h2>订单管理</h2>
          </li>
          <li class="block" @click="showAddress">
            <h2>地址管理</h2>
          </li>
        </ul>
    </div>
    <split></split>
  </cube-scroll>
</template>

<script>
  import Split from 'components/split/split'

  export default {
    props: {
      data: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    data() {
      return {
        scrollOptions: {
          click: true,
          directionLockThreshold: 0
        }
      }
    },
    computed: {
    },
    created() {
    },
    methods: {
      showOrder() {
        this.$router.push({ path: `/order` })
      },
      showAddress() {
        this.$router.push({ path: `/address` })
      }
    },
    components: {
      Split
    }
  }
</script>

<style lang="stylus" scoped>
  .my
    position: relative
    overflow: hidden
    .header-wrapper
      position: relative
      display: flex
      align-items: center
      padding: 24px 12px 18px 24px
      color: $color-white
      background: $color-background-ss
      .avatar
        flex: 0 0 64px
        width: 64px
        margin-right: 16px
        img
          border-radius: 2px
      .content
        flex: 1
        .title
          display: flex
          align-items: center
          margin-bottom: 8px
          .name
            font-size: $fontsize-small-s
            font-weight: bold
        .description
          margin-bottom: 8px
          line-height: 12px
          font-size: $fontsize-small
    .functions-wrapper
      position: relative
      padding: 18px
      .remark
        display: flex
        padding-top: 18px
        .block
          flex: 1
          text-align: center
          border-right: 1px solid $color-col-line
          &:last-child
            border: none
          h2
            margin-bottom: 4px
            line-height: 10px
            font-size: $fontsize-small-s
            color: $color-light-black
</style>
